<template>
  <div>
    <div v-if="show">
<!--      <mc-remote-select @focus="focusMea" v-model="a"  :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'31d8ce3a80f94543a6bc0f8c7f9bc9e3'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/holiday/list','params':[],'fields':[],'limit':10,'orders':[]},'pkField':'id','pkTextField':'title'}">
        <template #option="scope"><el-tag>{{scope.label}}</el-tag></template>
      </mc-remote-select>-->
      <mc-remote-select ref="mrs" v-model="a"  :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'bc3ba04086e1439fa184136ee79421cb'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/exception_group/list?catalog=magicalcoder','params':[],'fields':['id','groupDescription','groupId'],'limit':30,'orders':[]},'pkField':'id','pkTextField':'groupDescription'}"  @before-render-data="getGroup"></mc-remote-select>

     <!-- <mc-remote-select multiple @mc-change="changele" v-model="a"   :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'e700b2f7d00d45f792ec9aa745a4fd05'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/student/list','params':[],'fields':[],'limit':10},'pkField':'id','pkTextField':'name'}"></mc-remote-select>
-->    </div>
    <mc-remote-select v-model="keyword" multiple :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'bb5e81043e954a019ceec70a6f7be79e'}"
                      :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/keyword/list?catalog=mc_hotel','params':[],'fields':[],'limit':100,'orders':[]},'pkField':'id','pkTextField':'name'}"
                      :mc-option-disabled="optionDisabled">
      <template #option="scope">
							<span class="mc-span-pane" style="width:100%">
								<mc-text>{{scope.label}}</mc-text>
							</span>
      </template>
    </mc-remote-select>
    <el-button @click="print">打印</el-button>
    <el-button @click="change">改变</el-button>
    <el-button @click="hideshow">现因</el-button>
    <div style="height:800px"></div>
    <mc-remote-select v-model="remoteSelect" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'4ec1a0a435d844af84d4178e2d5a120b'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/employee_info/list?catalog=de822267c7094cabbdce84b8538f5cc1','params':[],'fields':[],'limit':100,'orders':[]},'pkField':'id','pkTextField':'name'}">
      <template #option="scope">
			<span class="mc-span-pane" style="width:100%">
				<mc-text>{{scope.label}}</mc-text>
			</span>
      </template>
    </mc-remote-select>
    <div></div>
    <mc-remote-select v-model="remoteSelect" :mc-config-tmp="{'stage':'db','apiUuid':'','tableUuid':'4ec1a0a435d844af84d4178e2d5a120b'}" :mc-config="{'type':'pk','options':[],'api':{'method':'post','url':'magical_lowcode/openapi/crud/employee_info/list?catalog=de822267c7094cabbdce84b8538f5cc1','params':[],'fields':[],'limit':100,'orders':[]},'pkField':'id','pkTextField':'name'}">
      <template #option="scope">
			<span class="mc-span-pane" style="width:100%">
				<mc-text>{{scope.label}}</mc-text>
			</span>
      </template>
    </mc-remote-select>
  </div>
</template>

<script>
import McRemoteSelect from './components/McRemoteSelect'
export default {
  data(){
    return {
      show:true,
      form: {msg:"",msg2:41},
      mcConfig:{'type':'pk',
      'options':[],
      'api':{'method':'get','url':'/public/table.json','params':[],'fields':[],'limit':10,"contentType":"json"},
      'pkField':'id',
      'pkTextField':'userName'
      },
      mcConfig2:{'type':'kv',
        'options':[{k:1,v:"哈哈"}],

      },

      sl:"",
      keyword:[],
      a:["00678fe5430f4f1e877f9b1e4abb29a4"]
    }
  },
  components:{
    McRemoteSelect
  },
  mounted(){
    this.form.msg=1
  },
  methods:{
    optionDisabled(param){
      return true;
    },
    async getGroup(param2){
      var _this = this;
      //这里的await 只支持当前程序阻塞，但是$emit那边就是异步了
      console.log(1)
      var _res = await this.$magicaltool.request.axios({$vue:this,method:"post",contentType:"application/json",url:"/magical_lowcode/openapi/b2b9487043874ed79b5e9ebf1d0d1c29/getAlarmCodeByDeviceId",responseType:"",param:{deviceId:1,},});
      console.log(2)
      param2.res.data=[]
      console.log(param2)
      _this.$forceUpdate();
    },
    focusMea(){
      console.log("out focus")
    },
      print(){
          console.log(this.form)
      },
      change(){
        this.$refs.mrs.focus()
        // this.form.msg2=42;
//        this.form.msg="402880ef805b3fa301805b4ca31d0009";
//        this.sl="1"
      },
      changele(val){
        console.log(this.form.msg)
        console.log(val)
      },
      hideshow(){
          this.show = !this.show;
      }
  }
}
</script>

<style>

</style>
